<template>
  <div>
    <a-card :bordered="false" :title="this.$t('hotel_info')">
      <a-descriptions bordered size="small">
        <a-descriptions-item :label="this.$route.params.supplier">{{ this.$route.params.supplierHotelId }} {{ hotelInfo.supplierHotelId1 }}</a-descriptions-item>
        <a-descriptions-item :label="this.$t('hotel_name')">{{ hotelInfo.hotelNameEn }}<br/>{{ hotelInfo.hotelNameCn }}</a-descriptions-item>
        <a-descriptions-item :label="this.$t('hotel_star')"><a-rate :value="hotelInfo.hotelStar" disabled /></a-descriptions-item>
        <a-descriptions-item :label="this.$t('city')">{{ hotelInfo.countryCode }}.{{ hotelInfo.countryName }} > {{ hotelInfo.provinceCode }}.{{ hotelInfo.provinceName }} > {{ hotelInfo.cityCode }}.{{ hotelInfo.cityName }} > {{ hotelInfo.zoneCode }}.{{ hotelInfo.zoneName }}</a-descriptions-item>
        <a-descriptions-item :label="this.$t('address')">{{ hotelInfo.hotelAddressEn }} <br /> {{ hotelInfo.hotelAddressCn }}</a-descriptions-item>
        <a-descriptions-item :label="this.$t('postalcode')" v-if="hotelInfo.postalcode && hotelInfo.postalcode.length > 0">{{ hotelInfo.postalcode }}</a-descriptions-item>
        <a-descriptions-item :label="this.$t('tel')">{{ hotelInfo.hotelTel }}</a-descriptions-item>
        <a-descriptions-item :label="this.$t('fax')" v-if="hotelInfo.hotelFax && hotelInfo.hotelFax.length > 0">{{ hotelInfo.hotelFax }}</a-descriptions-item>
        <a-descriptions-item label="Url" v-if="hotelInfo.hotelWeb && hotelInfo.hotelWeb.length > 0">{{ hotelInfo.hotelWeb }}</a-descriptions-item>
        <a-descriptions-item :label="this.$t('lon_lat')">{{ hotelInfo.hotelLongitude }} {{ hotelInfo.hotelLatitude }}</a-descriptions-item>
      </a-descriptions>
    </a-card>
    <a-card :bordered="false" :title="this.$t('room_info')">
      <a-table size="small" :columns="columns" :data-source="roomList" :pagination="{ showSizeChanger: true, showQuickJumper: true, size:'middle', showTotal:(total, range) => `${range[0]}-${range[1]} / ${total}`, current: pageIndex, pageSize: pageSize, total: total, pageSizeOptions:['10','20','30','50','100','1000','2000'], }" :row-key="record => record.id" :loading="loading" @change="handleTableChange">
        <a-icon slot="status" slot-scope="text" :type="text?'check-circle':'close-circle'" :style="text?'color:#52c41a;font-size: 18px;':'font-size: 18px;'"/>
        <div slot="roomNameEn" slot-scope="text, record">
          {{ record.roomNameEn }} <br /> {{ record.roomNameCn }}
        </div>
        <template v-for="(item, index) in columns" :slot="item.slotName">
          <span :key="index">{{ $t(item.slotName) }}</span>
        </template>
      </a-table>
    </a-card>
  </div>
</template>

<script>
import {getHotel,getRoomList} from '@/services/supplier'

export default {
  name: "SupplierHotel",
  i18n: require('../i18n'),
  data() {
    return {
      hotelInfo: {},
      columns:[
        {
          dataIndex: 'supplierRoomId',
          align: 'left',
          slotName: "supplier_room_id",
          slots: { title: 'supplier_room_id' },
        },{
          dataIndex: 'roomNameEn',
          align: 'left',
          slotName: "room_name",
          slots: { title: 'room_name' },
          scopedSlots: { customRender: 'roomNameEn' },
          sorter: (a, b) => a.roomNameEn.localeCompare(b.roomNameEn),
        },{
          dataIndex: 'maxOccupancy',
          align: 'center',
          slotName: "max_occupancy",
          slots: { title: 'max_occupancy' },
        },{
          dataIndex: 'roomStatus',
          align: 'center',
          slotName: "status",
          slots: { title: 'status' },
          scopedSlots: { customRender: 'status' },
        },{
          dataIndex: 'updatedTime',
          align:'center',
          slotName: "updatedTime",
          slots: { title: 'updatedTime' },
        },{
          dataIndex: 'thirdPartyId',
          align: 'left',
          slotName: "third_party_id",
          slots: { title: 'third_party_id' },
        },{
          dataIndex: 'roomDesc',
          align: 'left',
          slotName: "room_desc",
          slots: { title: 'room_desc' },
        },
      ],
      roomList: [],
      pageIndex: 1,
      pageSize: 10,
      total: 0,
      loading: false,
    }
  },
  methods: {
    getData() {
      getHotel(this.$route.params.supplier, this.$route.params.supplierHotelId).then(res => {
        this.hotelInfo = res.data.data
      }).catch(error => {
        console.log(error)
      })
    },
    fetchData(){
      this.loading = true
      getRoomList(this.pageIndex, this.pageSize, {supplier:this.$route.params.supplier, supplierHotelId:this.$route.params.supplierHotelId}).then(res => {
        const {rows, total} = res.data.data
        this.roomList = rows
        this.total = total
        this.loading = false
      }).catch(error => {
        console.log(error)
        this.loading = false
      })
    },
    handleTableChange(pagination) {
      if (this.pageIndex === pagination.current && this.pageSize === pagination.pageSize)
        return

      this.pageIndex = pagination.current;
      this.pageSize = pagination.pageSize;
      this.fetchData()
    },
  },
  created() {
    this.getData()
    this.fetchData()
  }
}
</script>